import React from 'react';
import { Routes, Route, Link, useNavigate, useRoutes } from 'react-router-dom';

import Home from './components/Home';
import Detail from './components/Detail';
import Test1 from './components/test1';
import Test2 from './components/test2';
import Rou1 from './components/rou1';
import Rou2 from './components/rou2';
export default function App() {
  // 函数组件中的:获取方法换存到变量上
  const navigate = useNavigate();
  // navigate方法直接更改pathName
  return (
    <div>
      App
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        后退
      </button>
      <button
        onClick={() => {
          navigate(1);
        }}
      >
        前进
      </button>
      <hr />
      <h3 style={{ display: 'inLine' }}>编程式导航: &nbsp;</h3>
      <button
        onClick={() => {
          navigate('/Home');
        }}
      >
        goHome
      </button>
      <button
        onClick={() => {
          navigate('/Detail');
        }}
      >
        goDetail
      </button>
      <button
        onClick={() => {
          navigate('/Home/test1');
        }}
      >
        goTest1
      </button>
      <button
        onClick={() => {
          navigate('/Home/test2');
        }}
      >
        goTest2
      </button>
      <button
        onClick={() => {
          navigate('/Detail/Rou1');
        }}
      >
        Rou1
      </button>
      <button
        onClick={() => {
          navigate('/Detail/Rou2');
        }}
      >
        Rou2
      </button>
      <hr />
      <h3>a标签链接:</h3>
      <> &nbsp; </>
      <Link to="/Home">去Home</Link>
      <> &nbsp;&nbsp;&nbsp; </>
      <Link to="/Detail">去Detail</Link>
      {/* <Routes>
        <Route path="/Detail" element={<Detail />}></Route>
      </Routes> */}
      {/* {useRoutes([
        {
          path: '/Home',
          element: <Home />,
          children: [
            {
              path: 'test1',
              element: <Test1 />,
            },
            {
              path: 'test2',
              element: <Test2 />,
            },
          ],
        },
        {
          path: '/Detail',
          element: <Detail></Detail>,
          children: [
            {
              path: 'Rou1',
              element: <Rou1 />,
            },
            {
              path: 'Rou2',
              element: <Rou2 />,
            },
          ],
        },
      ])} */}
      <Routes>
        <Route path="/Home" element={<Home />}>
          <Route path="test1" element={<Test1 />}></Route>
          <Route path="test2" element={<Test2 />}></Route>
        </Route>
        <Route path="/Detail" element={<Detail />}>
          <Route path="Rou1" element={<Rou1 />}></Route>
          <Route path="Rou2" element={<Rou2 />}></Route>
        </Route>
      </Routes>
    </div>
  );
}
